<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <#include "../../common/header.ftl">

    <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <#include "../../common/left-nav.ftl">

    <div class="main-box">
        <ol class="breadcrumb crumbs">
            <li class="active">运单统计</li>
        </ol>

        <div class="container-fluid">
            <div class="chart-search-bar">
                <form class="form-inline" id="searchForm">
                    <div class="form-group">
                        <label>开始时间</label>
                        <input type="text" autocomplete="off" class="form-control date" name="startTime"
                               placeholder="请选择运单开始时间">
                    </div>
                    <div class="form-group">
                        <label>结束时间</label>
                        <input type="text" autocomplete="off" class="form-control date" name="endTime"
                               placeholder="请选择运单结束时间">
                    </div>
                    <div class="form-group">
                        <label>托运方</label>
                        <input type="text" class="form-control" name="shipper" placeholder="输入托运方姓名">
                    </div>
                    <div class="form-group">
                        <label>收货方</label>
                        <input type="text" class="form-control" name="receiver" placeholder="输入收货方姓名">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
            </div>

            <div class="chart-div" id="dataChart">

            </div>

        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    var dataChart;
    $(document).ready(function () {
        $('.date').datepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd'
        });

        $('#searchForm').submit(function (e) {
            var formData = {};
            $(e.target).find('input').each(function () {
                if (this.value && this.value !== '') {
                    formData[this.name] = this.value;
                }
            });

            if (!formData.startTime || formData.startTime === '') {
                bootbox.alert('请输入开始时间');
                return false;
            }

            if (!formData.endTime || formData.endTime === '') {
                bootbox.alert('请输入结束时间');
                return false;
            }

            if (formData['startTime'] && formData['endTime']) {
                var st = new Date(formData['startTime']);
                var et = new Date(formData['endTime']);
                if (st.getTime() > et.getTime()) {
                    bootbox.alert('开始时间不能大于结束时间');
                    return false;
                }
            }

            console.info(formData);
            $.httpclient.get(API_REPORT + '/order', formData, function (res) {
                console.info(res);
                var data = res.obj;
                var echartOption = {
                    xAxis: {
                        data: data.dateArr
                    },
                    series: [
                        {
                            name: '运单量',
                            type: 'line',
                            data: data.orderCount
                        },
                        {
                            name: '吨位',
                            type: 'line',
                            data: data.orderWeight
                        },
                        {
                            name: '运费',
                            type: 'line',
                            data: data.orderCost
                        }
                    ]
                };
                dataChart.setOption(echartOption);
            });

            return false;
        });

        dataChart = echarts.init(document.getElementById('dataChart'));
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                top: 30,
                data: ['运单量', '吨位', '运费']
            },
            grid: {
                top: 80,
                left: 50,
                right: 20,
                bottom: 40
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [
                /*{
                    name: '运单量',
                    type: 'line',
                    data: [5, 20, 36]
                },
                {
                    name: '吨位',
                    type: 'line',
                    data: [55, 30, 16]
                },
                {
                    name: '运费',
                    type: 'line',
                    data: [25, 36, 33]
                }*/
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        dataChart.setOption(option);


    })
</script>